<template>
  <div class="side-bar-card">
    <div class="user-info">
      <a-avatar :size="80" style="background-color: #1890ff">U</a-avatar>
      <div class="user-info-name">用户1</div>
      <a-skeleton :loading="dailySentence === ''" :paragraph="false" active style="width: 160px">
        <div class="user-info-sign">{{dailySentence}}</div>
      </a-skeleton>
    </div>
    <a-menu class="side-bar" v-model:selectedKeys="current" @click="change">
      <a-menu-item key="0">推荐文章</a-menu-item>
      <a-menu-item v-for="classify in classifies" :key="classify.id">{{ classify.name }}</a-menu-item>
    </a-menu>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {apiGet, apiRequest} from "../../../fentch";

const classifies = ref([])
const current = ref(['0'])

// 每日一言
const dailySentence = ref('')

onMounted(() => {
  //获取每日一言
  apiRequest({
    url: 'https://cors.mczhengyi.top/v1.hitokoto.cn/'
  }).then(res => {
    dailySentence.value = res.data.hitokoto
  })

  apiGet('/classify').then(res => {
    if (res.data.code === 0) {
      classifies.value = res.data.data
      return
    }
    message.error(res.data.message)
  })
})

// 切换
const emit = defineEmits(['change'])

const change = config => {
  current.value[0] = config.key
  emit('change', config.key)
}
</script>

<style scoped>
.side-bar-card {
  background-color: #fff;
  margin-top: 10px;
  width: 300px;
  height: calc(100vh - 84px);
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 200px;
  padding: 15px 0;
}

.user-info-name {
  margin-top: 10px;
  font-size: 16px;
}

.user-info-sign {
  color: #999999;
  margin-top: 10px;
  font-size: 14px;
  width: 80%;
  text-align: center;
}

.side-bar {
  width: 300px;
  height: calc(100vh - 284px);
  overflow: auto;
}
</style>